TimePicker 时间选择

时间选择器，支持日期、年月、时分等维度，通常与弹出层组件配合使用。属于交互型「弹层组件」，包括触发元素和弹出内容。

配置组件时有如下特性：

• 采用组件形式调用
• 组件代码作为子元素插入到触发元素中

组件配置

TimePicker 时间选择包含多种类型，通过交互配置可直接实现选择年月日、选择年月、选择月日、选择时间和选择完整时间。

操作流程

1. 选中触发元素，在右侧交互设置面板，选择 TimePicker 时间选择；
2. 设置交互配置项；

TimePicker Attributes

参数	类型	可选值	默认值
title	顶部栏标题	string	''
type	时间类型，可选值为 date time year-month month-day datehour	string	datetime
min-date	可选的最小时间，精确到分钟	Date	十年前
max-date	可选的最大时间，精确到分钟	Date	十年后
confirm-button-text	确认按钮文字	string	确认
cancel-button-text	取消按钮文字	string	取消

注：属性来源于—Vant 组件库官网 TimePicker 组件属性。

组件代码

<template>
<span class="button" @click="onShow">
  首页
  <van-popup v-model="dateVisible" position="bottom">
    <van-datetime-picker
      :value="currentDate"
      @confirm="onConfirm"
      @cancel="onCancel"
      title="时间选择"
      type="date"
      confirm-button-text="确认"
      cancel-button-text="取消"
    ></van-datetime-picker>
  </van-popup>
</span>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      dateVisible: false,
      currentDate: null,
    };
  },

  methods: {
    onShow() {
      this.dateVisible = true;
    },
    onCancel() {
      this.dateVisible = false;
    },
    onConfirm(value) {
      this.currentDate = `${value.getFullYear()}-${(value.getMonth() + 1).toString().padStart(2, '0')}-${value
        .getDate()
        .toString()
        .padStart(2, '0')}`;
      this.dateVisible = false;
    },
  },
};
</script>